<template>
  <div>
    <headerNav></headerNav>
    <div class="enterpriseClaim">
      <div class="policyNotice_Nav">
        <p>企业认领</p>
      </div>
      <div class="content">
        <div class="content_content">
          <span>企业名称</span>
          <input type="text" placeholder="企业名称" :value="corporateName" readonly />
        </div>
        <div class="content_content">
          <span>
            联系人姓名
            <em>*</em>
          </span>
          <input type="text" placeholder="请输入联系人姓名" v-model="contacts" />
        </div>
        <div class="content_content">
          <span>
            联系方式
            <em>*</em>
          </span>
          <input type="text" placeholder="请输入联系方式" v-model="contactInformation" />
        </div>
        <div class="content_imgs">
          <span>
            营业执照
            <em>*</em>
          </span>
          <div class="content_imgs_content">
            <input type="file" @change="uploadLicense" />
            <p>选择文件</p>
          </div>
          <img :src="imgBaseUrl + businessLicense" alt v-if="businessLicense != ''" />
        </div>
        <div class="content_imgs">
          <span>
            个人名片
            <em>*</em>
          </span>
          <div class="content_imgs_content">
            <input type="file" @change="uploadCard" />
            <p>选择文件</p>
          </div>
          <img :src="imgBaseUrl + businessCard" alt v-if="businessCard != ''" />
        </div>
        <div class="content_content">
          <span></span>
          <button @click="submit">提交</button>
        </div>
      </div>
    </div>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
    <footerNav></footerNav>
    <navigation></navigation>
  </div>
</template>

<script>
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗
import { postRequest, imgBaseUrl } from "../../api/api.js";
import { uploadPictures, isMobile } from "../../util/validate.js";
import { mapMutations } from "vuex";

export default {
  components: {
    loginDialog
  },
  data() {
    return {
      // 企业名称
      corporateName: "",
      // 企业id
      corporateId: "",
      // 营业执照
      businessLicense: "",
      // 个人名片
      businessCard: "",
      // 联系人姓名
      contacts: "",
      // 联系方式
      contactInformation: "",
      imgBaseUrl: ""
    };
  },
  mounted() {
    this.imgBaseUrl = imgBaseUrl;
    this.corporateName = this.$route.query.title;
    this.corporateId = this.$route.query.id;
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    // 上传营业执照
    uploadLicense(e) {
      var that = this;
      uploadPictures(e.target.files[0]).then(function(data) {
        if (data == "上传失败") {
          that.$message.error("上传失败");
        } else {
          that.businessLicense = data.result;
          that.$message.success({
            message: "上传成功",
            type: "success"
          });
        }
      });
    },
    // 上传个人名片
    uploadCard(e) {
      var that = this;
      uploadPictures(e.target.files[0]).then(function(data) {
        if (data == "上传失败") {
          that.$message.error("上传失败");
        } else {
          that.businessCard = data.result;
          that.$message.success({
            message: "上传成功",
            type: "success"
          });
        }
      });
    },
    // 提交
    submit() {
      var that = this;
      if (that.contacts == "") {
        that.$message.error("请输入联系人姓名");
      } else if (!isMobile(that.contactInformation)) {
        that.$message.error("请输入正确的手机号");
      } else if (that.businessLicense == "") {
        that.$message.error("请上传营业执照");
      } else if (that.businessCard == "") {
        that.$message.error("请上传个人名片");
      } else {
        let data = {
          businessCard: that.businessCard,
          businessLicense: that.businessLicense,
          companyName: that.corporateName,
          contactNumber: that.contactInformation,
          contactPerson: that.contacts
        };
        if (that.corporateId !== 1) {
          data.companyId = that.companyId;
        }
        postRequest("/api/cms/cmsCompanyClaim/add", data).then(res => {
          if (res.success) {
            that.$message.success({
              message: "提交成功，等待后台审核",
              type: "success"
            });
            setTimeout(function() {
              that.$router.push("/VIP/company");
            }, 1000);
          } else {
            if (res.code == 10001) {
              this.$refs.login.open();
            } else {
              that.$message.error(res.message);
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.enterpriseClaim {
  width: 1200px;
  margin: 0 auto;
  min-height: 600px;
  .content {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;

    .content_content {
      overflow: hidden;
      margin: 20px 0;

      span {
        float: left;
        width: 200px;
        line-height: 34px;
        height: 34px;
        text-align: right;
        color: rgb(51, 51, 51);
        font-size: 14px;

        em {
          color: red;
        }
      }

      input {
        float: left;
        width: 500px;
        height: 34px;
        padding: 0 10px;
        font-size: 14px;
        border: 1px solid #aaa;
        border-radius: 4px;
        margin-left: 20px;
      }

      button {
        float: left;
        padding: 7px 13px;
        margin-left: 20px;
        font-size: 14px;
        background-color: #44a2ff;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;

        &:hover {
          background-color: #3494f3;
        }
      }
    }

    .content_imgs {
      overflow: hidden;
      margin: 20px 0;

      img {
        max-width: 250px;
        max-height: 200px;
        margin-left: 20px;
        float: left;
      }

      span {
        float: left;
        width: 200px;
        line-height: 34px;
        height: 34px;
        text-align: right;
        color: rgb(51, 51, 51);
        font-size: 14px;

        em {
          color: red;
        }
      }

      .content_imgs_content {
        float: left;
        width: 100px;
        height: 34px;
        padding: 0 10px;
        font-size: 14px;
        border: 1px solid #aaa;
        border-radius: 4px;
        margin-left: 20px;
        position: relative;
        overflow: hidden;

        input {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          opacity: 0;
        }

        p {
          line-height: 34px;
          text-align: center;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
